@charset "UTF-8";

@import "_reset";


@function r($px){
    @return ($px/40) * 1rem;
}

@function half($px){
    @return ($px/2) * 1px;
}
.web{
    height: 100%;
    width: r(750);
    .load{
        position: relative;
//      display: none;
        width: 100%;
        height: 100%;
        background: #4f4f4f;
        .load-posi{
            position: absolute;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .load-man{
            top: r(300);
            left: r(60);
            img{
                width: 120%;
                height: 100%;
            }
        }
        .load-rocket{
            bottom: r(160);
            left: r(300);
            
        }
        .load-ball{
            bottom: r(-10);
            right: 0;
            img{
                width: 100%;    
            }
        }
        .load-text{
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            opacity: 0;
            animation: text 1s linear 400ms 1 normal forwards;
            img{
                width: r(200);
            }
            @keyframes text{
                0%{
                    opacity: 1;
                    transform: scale(0.3,0.3);
                }
                100%{
                    opacity: 1;
                    transform: scale(1,1);
                }
            }
        }
        .load-txt{
            bottom: r(90);
            left: r(16);
            font-size: r(40);
            color: white;
        }
    }
    .ydShare{
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        background: rgba(0,0,0,.7);
        z-index: 1700;
        img{
            position: absolute;
            top: 2.15rem;
            right: 2.75rem;
            width: 13.5rem;
            height: 9.175rem;
        }
    }
    //开始
    .begin{
//      display: none;
        position: relative;
        height: 100%;
        width: 100%;
        top: 0;
        bottom: 0;
        background: #fff;
        z-index: 1000;
        overflow: hidden;
        .light{
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 22.5rem solid #555;
            border-right: 22.5rem solid #555;
            position: absolute;
            top: -999px;
            left: -999px;
            right: -999px;
            bottom: -999px;
            margin: auto;
        }
        .lg1{
            animation: lgs1 3s linear infinite;
        }
        @keyframes lgs1{
            0%{
                -webkit-transform: rotateZ(0);
                transform: rotateZ(0);
            }
            100%{
                -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
            
        }
        .lg2{
            animation: lgs2 3s linear infinite;
        }
        @keyframes lgs2{
            0%{
                -webkit-transform: rotateZ(30deg);
                transform: rotateZ(30deg);
            }
            100%{
                -webkit-transform: rotateZ(390deg);
                transform: rotateZ(390deg);
            }
            
        }
        .lg3{
            animation: lgs3 3s linear infinite;
        }
        @keyframes lgs3{
            0%{
                -webkit-transform: rotateZ(60deg);
                transform: rotateZ(60deg);
            }
            100%{
                -webkit-transform: rotateZ(420deg);
                transform: rotateZ(420deg);
            }
            
        }
        .lg4{
            animation: lgs4 3s linear infinite;
        }
        @keyframes lgs4{
            0%{
                -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }
            100%{
                -webkit-transform: rotateZ(450deg);
                transform: rotateZ(450deg);
            }
            
        }
        .lg5{
            animation: lgs5 3s linear infinite;
        }
        @keyframes lgs5{
            0%{
                -webkit-transform: rotateZ(120deg);
                transform: rotateZ(120deg);
            }
            100%{
                -webkit-transform: rotateZ(480deg);
                transform: rotateZ(480deg);
            }
            
        }
        .lg6{
            animation: lgs6 3s linear infinite;
        }
        @keyframes lgs6{
            0%{
                -webkit-transform: rotateZ(150deg);
                transform: rotateZ(150deg);
            }
            100%{
                -webkit-transform: rotateZ(510deg);
                transform: rotateZ(510deg);
            }
            
        }
        .begin-logo{
            position: absolute;
            z-index: 800;
            top: 0;
            right: 0;
            height: 2.75rem;
            padding: 0.4rem;
            img{
                height: 1.75rem;
            }
        }
        .begin-title{
            position: absolute;
            z-index: 800;
            top: 2.75rem;
            height: 8.7rem;
            padding: 0.3rem;
            transition: all 0.5s ease;
            img{
                width: 135%;
                height: 100%;
            }
        }
        .begin-mouth{
            position: absolute;
            top: r(440);
            left: r(60);
            animation: mouth 1s linear infinite;
            img{
                width: 120%;
                height: 100%;
            }
            @keyframes mouth{
                0%,100%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(0.96);
                }
            }
        }
        .begin-mouth2{
            position: absolute;
            top: r(600);
            left: r(320);
            img{
                width: 110%;
            }
        }
        .begin-mans img:first-of-type{
            position: absolute;
            top: r(740);
            left: r(20);
            width: 49%;
        }
        .begin-mans img:nth-of-type(2){
            top: 18rem;
            width: 32%;
            position: absolute;
            left: 0.5rem;
            animation: query 1s ease infinite;
            @keyframes query{
                0%,100%{
                    transform: rotateZ(2deg); 
                }
                50%{
                    transform: rotateZ(-2deg);
                }
            }
        }
        .begin-mans img:nth-of-type(3){
            position: absolute;
            width: 49%;
            bottom: 2rem;
            right: 0rem;
        }
        .begin-mans img:nth-of-type(4){
            position: absolute;
            width: 1.5rem;
            bottom: 6.75rem;
            right: 0.15rem;
        }
        .begin-mans img:nth-of-type(5){
            position: absolute;
            width: 1.5rem;
            bottom: 10.75rem;
            right: 0.15rem;
        }
        .begin-mans img:nth-of-type(6){
            position: absolute;
            width: 1.5rem;
            bottom: 10.75rem;
            right: 7.75rem;
        }
        .begin-mans img:nth-of-type(7){
            position: absolute;
            width: 1.5rem;
            bottom: 6.75rem;
            right: 7.75rem;
        }
        .begin-begin{
            position: absolute;
            bottom: 0.8rem;
            width: 100%;
            text-align: center;
            img{
                animation:tada 1s ease infinite;;
            }
            @keyframes tada{
                0%,100%{
                    transform: scale3d(1,1,1);
                }
                10%,20%{
                    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
                }
                30%, 50%, 70%, 90%{
                    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
                }
                40%, 60%, 80%{
                    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
                }
            }
        }     
    }
    .end{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(../img/user_bg.png) no-repeat;
        background-size: 100% 100%;
        z-index: 700;
        text-align: center;
        overflow: hidden;
        .end-top{
            .user{
                background: url(../img/userint.png) no-repeat;
                background-size: 100% auto;
                width: 7.25rem;
                height: 2.6rem;
                position: absolute;
                left: .475rem;
                top: .425rem;
                .touxiang{
                    position: absolute;
                    left: .575rem;
                    top: .4rem;
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: 50%;
                    overflow: hidden;
                    text-align: center;
                    line-height: 1.5rem;
                }
                span{
                    position: absolute;
                    left: 2.25rem;
                    top: .4rem;
                    height: 1.5rem;
                    width: 4.5rem;
                    text-align: center;
                    font-size: .6rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    line-height: 1.8rem;
                }
            }
            .logo{
                position: absolute;
                top: .625rem;
                right: .25rem;
                img{
                    width: 6.25rem;
                }
            }
        }
        .jiangpai{
            position: absolute;
            top: 2.5rem;
            width: 100%;
            img{
                width: 6rem;
            }
        }
        .guess{
            .guess-bg{ 
                position: absolute;
                top: 9.5rem;
                width: 100%;
            }
            .guess-text{
                position: absolute;
                top: 9.9rem;
                left: 7.5rem;
            }
        }
        .boast-text{
            background: url(../img/text.png) no-repeat;
            position: absolute;
            top: 12.675rem;
            left: .25rem;
            padding: 0 .5rem;
            height: 2.5rem;
            background-size: 100% 100%;
            font-size: .8rem;
            line-height: 1.25rem;
        }
        .buttons{
            position: absolute;
            top: 15.75rem;
            width: 100%;
            left: 50%;
            margin-left: -50%;
            a{
                font-weight: 700;
                text-align: center;
                line-height: 1.25rem;
                text-decoration: none;
                font-size: .75rem;
                color: #251d19;
                display: inline-block;
                width: 5.25rem;
                height: 1.5rem;
            }
            a:first-of-type{
                background: url(../img/buttonleft.png) no-repeat;
                background-size:100% 100% ;
                padding-left: r(50);
            }
            a:nth-of-type(2){
                background: url(../img/buttonright.png) no-repeat;
                background-size:100% 100% ;
                padding-right: r(50);
            }
        }
        .record{
            position: absolute;
            bottom: r(256);
            left: r(174);
            img{
                width: 120%;
            }
        }
        .list{
            background: url(../img/paiming_bg.png) no-repeat;
            background-size: 100% 100%;
            margin: 26.25rem .5rem 0;
            padding: 3.35rem;
        }
    }
    .anima{
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 800;
        text-align: center;
        overflow: hidden;
        display: none;
        .xiangyou{
                animation: you 1s linear forwards;
                @keyframes you{
                    0%{
                        transform: translateX(0);
                    }
                    100%{
                        transform: translateX(r(-750));
                    }
                }
        }
        #pagebox{
            height: 100%;
            transition: all 1s ease;
            width: r(4500);
            .xuanzhuan{
                animation: qiehuan 1s linear forwards;
                @keyframes qiehuan{
                    0%{
                        transform:rotateZ(0) scale(1);
                    }
                    100%{
                        transform: rotateZ(720deg) scale(0);
                        
                    }
                }
            }
            
            .page{
                height: 100%;
                float: left;
                position: relative;
                overflow: hidden;
                width: r(750);
//              transform: translateX(r(-750));
                .round{
                    position: absolute;
                    top: -999px;
                    bottom: -999px;
                    left: -999px;
                    right: -999px;
                    margin: auto;
                    -webkit-transition: all 1s linear;
                    transition: all 1s linear;
                    border-radius: 50%;
                    border: 2rem solid #4f4f4f;
                }
                .round1{
                    width: 1.5rem;
                    height: 1.5rem;
                }
                .round2{
                    width: 10rem;
                    height: 10rem;
                }
                .round3{
                    width: 17.5rem;
                    height: 17.5rem;
                }
                .round4{
                    width: 25rem;
                    height: 25rem;
                }
                .round5{
                    width: 32.5rem;
                    height: 32.5rem;
                }
                .page-img{
                    .text{
                        padding-left: .125rem;
                        padding-right: 2.25rem;
                        padding-top: 1.75rem;
                        position: relative;
                        
                        img{
                            width: 100%;
                            animation: text1 1s ease forwards;
                            @keyframes text1{
                                0%{
                                transform: translateY(-200%);
                            }
                            100%{
                                transform: translateY(0%);
                            }
                            }
                        }
                        
                    }
                    .manwomen{
                        position: absolute;
                        bottom: 30%;
                        padding-left: r(20);
                        animation: peoples 0.5s ease forwards;
                        img{
                            width: 140%;
                        }
                        @keyframes peoples{
                            0%{
                                transform: translateY(-200%);
                            }
                            100%{
                                transform: translateY(0%);
                            }
                        }
                    }
                    .wall{
                        position: absolute;
                        bottom: 20%;
                        width: 100%;
                        img{
                            width: 100%;
                        }
                    }
                }
                .light{
                    width: 0;
                    height: 0;
                    border-top: 100px solid transparent;
                    border-bottom: 100px solid transparent;
                    border-left: 22.5rem solid #555;
                    border-right: 22.5rem solid #555;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    right: -999px;
                    bottom: -999px;
                    margin: auto;
                }
                .lg1{
                    animation: lgs1 3s linear infinite;
                }
                .lg2{
                    animation: lgs2 3s linear infinite;
                }
                .lg3{
                    animation: lgs3 3s linear infinite;
                }
                .lg4{
                    animation: lgs4 3s linear infinite;
                }
                .lg5{
                    animation: lgs5 3s linear infinite;
                }
                .lg6{
                    animation: lgs6 3s linear infinite;
                }
                .disk{
                    height: 50%;
                    width: 100%;
                
                .lightTop{
                    position: relative;
                    img{
                        width: 90%;
                    }
                }
                .middle{
                    position: relative;
                    height: 14rem;
                    .cheer-left{
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 30%;
                        .wow-left{
                            position: absolute;
                            left: 0;
                            bottom: 6.25rem;
                            width: 100%;
                        }
                        .people-left{
                            position: absolute;
                            left: 0;
                            bottom: .25rem;
                            width: 160%;
                        }
                    }
                    .cheer-right{
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 40%;
                        .wow-right{
                            position: absolute;
                            bottom: 6.25rem;
                            right: 0;
                            width: 100%;
                        }
                        .people-right{
                            position: absolute;
                            right: 0;
                            bottom: .25rem;
                            width: 130%;
                        }
                    }
                    .singer{
                        position: relative;
                        .stage{
                            position: absolute;
                            width: 100%;
                            left: 0;
                            top: 10rem;
                        }
                        .songer{
                            position: absolute;
                            top: -1.5rem;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                            width: 70%;
                            transform: scale(1);
                        }
                    }
                }   
            }
            .circle{
                position: absolute;
                top: -999px;
                bottom: -999px;
                left: -999px;
                right: -999px;
                margin: auto;
                -webkit-transition: all 1s linear;
                transition: all 1s linear;
                border-radius: 50%;
                border: 2rem solid #4f4f4f;
                width: 0;
                height: 0
            }
            .circle1{
                width: 1.5rem;
                height: 1.5rem;
            }
            .circle2{
                width: 10rem;
                height: 10rem;
            }
            .circle3{
                width: 17.5rem;
                height: 17.5rem;
            }
            .circle4{
                width: 25rem;
                height: 25rem;
            }
            .circle5{
                width: 32.5rem;
                height: 32.5rem;
            }
            .tmps{
                transform: translateX(2.5rem) translateY(-2.5rem);
            }
            .disk{
                .bat-wall{
                    position: absolute;
                    top: 6.25rem;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    height: 6.3rem;
                    img{
                        width: 100%;
                    }
                }
                .people-mam{
                    position: absolute;
                    top: 4rem;
                    img{
                        width: 135%;
//                      transform: translateX(-100%);
                    }
                }
                .zheban{
                    position: relative;
                    img:first-of-type{
                        position: absolute;
                        left: 0;
                        top: 3rem;
                        width: 60%;
                    }
                    img:nth-of-type(2){
                        position: absolute;
                        right: 0;
                        top: 5.5rem;
                        width: 60%;
                        z-index: 9;
                    }
                }
                .soap-bar{
                    position: relative;
                    z-index: 5;
                    .soap{
                        position: absolute;
                        top: 13.75rem;
                        left: 1rem;
                        width: 6rem;
//                      transform: translateX(7.5rem) translateY(-5rem);
                    }
                    .soap-people{
                        position: absolute;
                        top: -2rem;
                        right: 0;
                        width: 70%;
                    }
                }
            }
            .disk{
                .want{
                    position: relative;
                    img{
                        width: 60%;
                        margin-left: -5rem;
                        margin-top: -4.5rem;
                        animation: want 1s ease infinite;
                        @keyframes want{
                            0%,100%{
                                transform: scale(1);
                            }
                            30%,70%{
                                transform: scale(1.1);
                            }
                            50%{
                                transform: scale(0.96);
                            }
                        }
                    }
                }
                .car{
                    position: relative;
                    img{
                        width: 100%;
                        transform-origin: bottom;
                        animation: cars 1s ease infinite;
                        @keyframes cars{
                            0%,100%{
                                transform: rotateZ(1deg);
                            }
                            50%{
                                transform: rotateZ(-1deg);
                            }
                        }
                    }
                }
                .flower{
                    position: absolute;
                    right: .75rem;
                    top: 8.25rem;
                    img{
                        width: 3.5rem;
                    }
                }
            }
            .disk{
                .rightto{
                    position: absolute;
                    right: -6rem;
                    top: .5rem;
                    width: 100%;
                }
                .flower-left{
                    position: absolute;
                    top: 35%;
                    left: 0;
                    img{
                        width: 5.25rem;
                        animation: flowerL 1s ease infinite;
                        @keyframes flowerL{
                            20%, 40%, 60%, 80%, 0%, 100%{
                                animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
                            }
                            0%{
                                transform: scale3d(0.3,0.3,0.3);
                            }
                            20%{
                                transform: scale3d(1.1,1.1,1.1);
                            }
                            40%{
                                transform: scale3d(0.9,0.9,0.9);
                            }
                            60%{
                                transform: scale3d(1.03,1.03,1.03);
                            }
                            80%{
                                transform: scale3d(0.97,0.97,0.97);
                            }
                            100%{
                                transform: scale3d(1,1,1);
                            }
                        }
                    }
                }
                .flower-right{
                    position: absolute;
                    right: 0;
                    top: 35%;
                    img{
                        width: 3.75rem;
                        animation: flowerL 1s ease infinite;;
                    }
                }
                .oldman{
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 4rem;
                    margin: 0 auto;
                    img{
                        width: 80%;
                    }
                }
            }
            .disk{
                .courage{
                    margin-top: 1rem;
                    text-align: left;
                    img{
                        width: 70%;
//                      transform: scale(0);
                    }
                }
                .women{
                    position: absolute;
                    right: 0;
                    top: 4rem;
                    width: 50%;
                    img{
                        width: 100%;
                    }
                }
                .man{
                    margin-left: 0.5rem;
                    img{
                        width: 100%;
//                      transform: translateX(-100%);
//                      transition: all 1s ease;
                    }
                }
            }
              
            }
            .page-bg{
                background: url(../img/manwoman_bg.png) no-repeat;
                background-size: 100% 100%;
            }
            
        }
        .itembox{
            width: 18.75rem;
            text-align: center;
            position: absolute;
            bottom: 1.5rem;
            left: 0;
            height: 40%;
            z-index: 100;
            .item{
                position: absolute;
                left: 1rem;
                right: 4.5rem;
                height: 2rem;
                font-size: 1rem;
                line-height: 2rem;
            }
            .selectA{
                bottom: 5.75rem;
                background: url(../img/selectA.png) center no-repeat;
                background-size: 100% 100%;     
            }
            .selectB{
                bottom: 3.25rem;
                background: url(../img/selectB.png) no-repeat;
                background-size: 100% 100%;     
            }
            .selectC{
                bottom: .75rem;
                background: url(../img/selectC.png) no-repeat;
                background-size: 100% 100%;     
            }
            .next{
                position: absolute;
                bottom: r(10);
                right: .9rem;
                width: 2.5rem;
                height: 8rem;
                .smallMouth{
                    width: 100%;
                    height: 2.6rem;
                    line-height: 2.5rem;
                    margin-bottom: .5rem;
                    text-align: center;
                    color: #241c18;
                    font-size: .8rem;
                    background: url(../img/smallMouth.png) no-repeat;
                    background-size: 100% auto;
                }
            }
        }
        .tips{
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            margin-top: -1.25rem;
            margin-left: -6.25rem;
            color: #FFF;
            font-size: .75rem;
            background: rgba(0,0,0,.4);
            border-radius: .2rem;
            z-index: 50;
        }
    }
}






